<template>
    <div class="home">
        <Header />
        <section class="hero-section">
            <h1>智慧大棚数据监测管理系统</h1>
            <p>欢迎来到智慧大棚数据监测管理系统！本系统旨在提供高效、精准的大棚环境监测和管理服务。</p>
        </section>

        <div class="notice-and-weather">
            <Notice />
            <Weather :currentWeatherIcon="currentWeatherIcon" :currentTemperature="currentTemperature"
                :weatherForecast="weatherForecast" />
        </div>

        <section class="info-section">
            <h2>系统简介</h2>
            <p>智慧大棚数据监测管理系统是一个集成了环境监测、设备管理、作物管理和数据分析的综合平台。通过本系统，您可以实时监控大棚内的环境参数，管理设备运行状态，跟踪作物生长情况，并获取智能建议和历史记录。</p>
        </section>

        <section class="contact-section">
            <h2>联系我们</h2>
            <ul>
                <li><strong>电话:</strong> ******</li>
                <li><strong>邮箱:</strong> ******</li>
                <li><strong>地址:</strong> ******</li>
            </ul>
        </section>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import axios from 'axios';
import Header from '@/components/Header.vue';
import Notice from '@/components/Notice.vue';
import Weather from '@/components/Weather.vue';

const currentWeatherIcon = ref('');
const currentTemperature = ref('');
const weatherForecast = ref([]);

const fetchLocationAndWeather = async () => {
    const apiKey = '4a468d9d6cddc80f7073067c2c4ea6e5'; // 替换为你的高德地图 API 密钥

    try {
        // 获取用户所在城市
        const locationUrl = `https://restapi.amap.com/v3/ip?key=${apiKey}`;
        const locationResponse = await axios.get(locationUrl);
        const city = locationResponse.data.city;

        // 获取天气信息
        const weatherUrl = `https://restapi.amap.com/v3/weather/weatherInfo?key=${apiKey}&city=${city}`;
        const weatherResponse = await axios.get(weatherUrl);
        const data = weatherResponse.data.lives[0];
        currentWeatherIcon.value = `https://restapi.amap.com/v3/weather/weatherInfo?key=${apiKey}&city=${city}&output=png`;
        currentTemperature.value = data.temperature;

        // 获取未来几天的天气预报
        const forecastUrl = `https://restapi.amap.com/v3/weather/forecast?output=json&key=${apiKey}&city=${city}`;
        const forecastResponse = await axios.get(forecastUrl);
        const forecastData = forecastResponse.data.forecasts[0];

        for (let i = 0; i < forecastData.casts.length; i++) {
            if (i === 0 || i > 2) continue; // 跳过今天和后天以外的数据
            const dayForecast = {
                date: forecastData.casts[i].date,
                daytimeCondition: forecastData.casts[i].daytime,
                nightCondition: forecastData.casts[i].night
            };
            weatherForecast.value.push(dayForecast);
        }
    } catch (error) {
        console.error('Error fetching location and weather data:', error);
    }
};

onMounted(() => {
    fetchLocationAndWeather();
});
</script>

<style scoped>
.home {
    padding: 20px;
    text-align: center;
}

.hero-section {
    background-color: #4a505a;
    color: #ffffff;
    padding: 50px 0;
    border-radius: 8px;
    margin-bottom: 20px;
}

.hero-section h1 {
    font-size: 2.5em;
    margin-bottom: 20px;
}

.hero-section p {
    font-size: 1.2em;
    max-width: 800px;
    margin: 0 auto;
}

.notice-and-weather {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 20px;
    background-color: #f0f0f0;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin-top: 10px;
}

.info-section,
.contact-section {
    background-color: #ffffff;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.info-section h2,
.contact-section h2 {
    font-size: 1.8em;
    margin-bottom: 20px;
}

.info-section p,
.contact-section p {
    font-size: 1.2em;
    line-height: 1.5;
    max-width: 800px;
    margin: 0 auto;
}

.contact-section ul {
    list-style: none;
    padding: 0;
}

.contact-section li {
    font-size: 1.2em;
    margin-bottom: 10px;
}
</style>